{extend name="index/index" /}

{block name="title"}
<title>[ Roll Call ]</title>
{/block}

{block name="css"}
{css href="_CSS_login.css"}
{/block}

{block name="main"}
<div id="main" class="mt50">
    <div class="fr">
        <form name="groupForm" class="form-inline">
            <div class="input-group col-md-4 pull-left">
                <a href="{:url('index/index/index')}" class="btn btn-warning">
                    <i class="icon icon-arrow-left"></i> 返回入口
                </a>
            </div>

            <div class="input-group col-md-3 pull-right">
                <select class="form-control" name="group">
                    <option value="">请选择...</option>
                    {foreach $groupList as $val}
                    <option
                            value="{$val['class_name']}"
                            {if condition="input('get.group') == $val['class_name']" }
                            selected
                            {/if}
                    >
                    {$val['class_name']}
                    </option>
                    {/foreach}
                </select>
                <span class="input-group-btn">
                    <a href="javascript:void(0)" class="btn btn-warning" onclick="loadStu()">加载班期</a>
                </span>
            </div>
        </form>
    </div>
    <div id="content1">点名器</div>
    <div id="content2">没错，我就是传说中的点名器，看看谁中弹！</div>

    <hr>
    <button onClick="tip()" id="bbt">点击开始</button>
</div>

<div class="col-md-12 text-center mt50">
    <address>
        <a href="http://www.itxdl.cn" target="_blank" style="color:#333">
            Copyright&nbsp;<span class="glyphicon glyphicon-copyright-mark"></span>
            &nbsp;2015&nbsp;&nbsp;• itxdl.cn</a> 丨
        <a href="http://weibo.com/sosdust" target="_blank" style="color:#333"> 探索者丶枫 [ 讲师.黄超 ]</a>
    </address>
</div>

<nav class="navbar navbar-fixed-bottom">
    <div class="container-fluid">
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="{:url('index/index/roll')}"><span class="glyphicon glyphicon-transfer"></span> ROLL</a>
                </li>
                <li><a href="{:url('index/index/index')}"><span class="glyphicon glyphicon-pencil"></span> INDEX</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

{/block}

{block name="js"}
<script>
    var list1=list2=timer=null;function loadStu(){let group=$('form[name="groupForm"]').serialize();$.ajax({method:'get',url:'/getstu',data:group,dataType:'json',success:function(data){if(data.code===200){list1=data.list1;list2=data.list2;new $.zui.Messager(data.msg,{time:3000,placement:'top-right',type:'info',}).show()}else{new $.zui.Messager(data.msg,{time:3000,placement:'top-right',type:'default',}).show()}},error:function(){new $.zui.Messager('拉取学员列表失败，请重试！',{time:3000,placement:'top-right',type:'danger',}).show()}})}function tip(){if(list1===null){new $.zui.Messager('请先选择 要点名的班期，再开始点名！',{placement:'center',type:'default'}).show();return false}var btn=$('#bbt');if(timer==null){btn.css('background-color','#333');btn.css('color','#eee');btn.html('点击停止');run()}else{btn.css('background-color','#eee');btn.css('color','#c00');btn.html('点击开始');clearTimeout(timer);timer=null}}function run(){var con1=$('#content1');var con2=$('#content2');var i=Math.round(Math.random()*(list1.length-1));con1.html(list1[i]);con2.html(list2[i]);timer=setTimeout(run,50)}
</script>
{/block}
